<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>天庆今年变白了吗？？？</h1>
    <h1>{{msg}}</h1>
    <!-- 调用组件的方式 -->
    <WangHouBang></WangHouBang>
    <hr />
    <WangHouBang />
    <hr />
    <wang-hou-bang></wang-hou-bang>
    <hr />
    <wang-hou-bang />
  </div>
</template>

<script>
/* 
最外层的APP组件
template  html 模板语法 指令
script  js  es6模块化
style css样式

app组件同main.js产生直接联系
其他组件都同app产生直接或者间接联系
data为函数格式
*/
/* 
创建组件的流程
1.创建子组件 components文件夹中创建组件  组件名首字母大写 使用驼峰命名法  文件后缀名.vue
2.template模板中必须有根标签
3.在父组件中引入子组件， 注册组件
4.调用组件

组件和组件之间是相互独立的，不做任何操作数据不能共享，做某些操作就可以进行传值
*/

/* 
模块化 组件化 工程开发化
模块化开发 是代码复用js文件 是大量的js文件根据某种规则进行拆分，拆分完毕后形成一个个js小块，每一个模块中的数据都是私有化
一个项目中大量使用模块化开发  模块化开发
组件化 是html+css + js组成具有特定功能和效果的代码的集合，实现复用，一个项目由多个组件组成就是组件化开发
企业级别组件化开发 工程化

*/
/* 
拆分组件规则：
1.拆分组件
一定要依据一定规则进行拆分  建议按照位置去拆分组件
2.实现静态组件
3.实现动态组件
① 设计初始化数据，进行初始化数据的显示
② 组件之间的交互

注意：设计初始化数据时一定要注意：分析数据哪个组件需要就放到哪个组件中，哪些组件需要该数据就放到共同父级组件中


*/
// 引入组件
import WangHouBang from "./components/WangHouBang";
export default {
  name: "App",
  data() {
    return {
      msg: "海底小纵队！！"
    };
  },
  // 注册组件
  components: {
    WangHouBang
  }
};
</script>

<style>
</style>
